<template>
	<div class="centerclientuserinfo">
		<a class="returnback" @click="goback()">
			<img :src="constant.imgUrl +'design/caseback.png'" alt="">
		</a>
		<div class="listbody">
			<div class="order_item" v-for="(item,index) in user_list" :key="index" @click="skiptoedit(item)">
				<div class="order_item_item">
					<p class="order_tip">下单页面</p>
					<p class="order_content">{{ item.prebook_source }}</p>
				</div>
				<div class="order_item_item">
					<p class="order_tip">下单时间</p>
					<p class="order_content">{{ item.edit_time_str }}</p>
				</div>
				<div class="order_item_item">
					<p class="order_tip">地区</p>
					<p class="order_content">{{ item.full_address || '待确认' }}</p>
				</div>
				<div class="order_item_item">
					<p class="order_tip">小区</p>
					<p class="order_content">{{ item.xiaoqu || '待确认' }}</p>
				</div>
				<div class="order_item_item">
					<p class="order_tip">户型</p>
					<p class="order_content">
						{{ $util.isEmpty(item.house_shi)?'待确认':
						`${item.house_shi}房
						${item.house_ting}厅
						${item.house_yang}阳
						${item.house_wei}卫
						${$util.isEmpty(item.house_chu)?0:item.house_chu}厨`
						|| '待确认' }}
					</p>
				</div>
				<div class="order_item_item">
					<p class="order_tip">面积</p>
					<p class="order_content">
						{{
						$util.isEmpty(item.square)?'待确认': item.square + '㎡'
						}}
					</p>
				</div>
			</div>
			<!--<uLiLoadMore :status="loading"></uLiLoadMore>-->
			<p class="datatext" v-if="user_list.length == 0">{{datatext}}</p>
		</div>
		<footer class="pub_footer">
			<UserDetFooter :phone="phone"/>
		</footer>
	</div>
</template>

<script>
import { getappoint } from '@/api/prebook'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
import UserDetFooter from '@/pages/components/userDetFooter'
export default {
	name: 'appointrecord',
	components: {
		uniLoadMore,
		UserDetFooter
	},
	data() {
		return {
			constant: this.$constant,
			backstatus: true,
			scrollTop: 0,
			user_list: [],
			limit: 10,
			orderCurrentPage: 1,
			user_loading: false,
			user_finished: false,
			phone: '',
			create_user_id: '',
			timer: null,
			loadingType: 0,
			loading: 'nodata',
			datatext: '暂无数据'
		}
	},
	onLoad(opcation) {
		// console.log(JSON.parse(opcation))
		this.owner_user_id = opcation.owner_user_id
		this.end_time = this.dateFormat(new Date())
		this.phone = opcation.mobile
		this.create_user_id = opcation.create_user_id
		this.init()
	},
	onPullDownRefresh() {
		this.getOrderList(1)
		uni.showLoading({
			title: '数据已刷新'
		})
	},
	onReachBottom: function() {
		let that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		this.timer = setTimeout(function() {
			that.getOrderList(2)
		}, 1000)
		// this.getcasemore();
	},
	mounted() {

	},
	methods: {
		goback() {
			uni.navigateBack({
				delta: 1
			})
		},
		init() {
			this.getOrderList(1)
		},
		dateFormat(date) {
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			const hour = date.getHours()
			const min = date.getMinutes()
			const second = date.getSeconds()
			return `${year}-${month}-${day} ${hour}:${min}:${second}`
		},
		skiptoedit(item) {
			let pragram = {
				status: 'edit',
				prebook_id: item.prebook_id
			}
			uni.navigateTo({
				url: `/pages/order/subscribeOrderEdit${this.commonJS.queryData(pragram)}`
			})
		},
		getOrderList(type) {
			if (type == 1) {
				this.page = 1
				this.loadingType = 0
				uni.showNavigationBarLoading()
			} else {
				this.page++
				if (this.loadingType !== 0) { // loadingType!=0;直接返回
					return false
				}
				this.loadingType = 1
				uni.showNavigationBarLoading()
			}
			const params = {
				limit: 5,
				page: this.page,
				end_time: this.end_time,
				create_user_id: this.create_user_id
				// mobile: this.$route.query.mobile
			}
			getappoint(params).then((res) => {
				if (res.status === 'success') {
					if (res.data.data.length !== 0) {
						if (type == 1) {
							this.user_list = []
						}
						this.user_list = this.user_list.concat(res.data.data)
						if (type == 1) {
							uni.hideNavigationBarLoading()
							uni.stopPullDownRefresh()
							uni.hideLoading()
						} else {
							this.loadingType = 0// 将loadingType归0重置
							uni.hideNavigationBarLoading()
						}
						if (res.data.current_page == res.data.last_page) {
							this.loadingType = 2
							this.loading = 'nomore'
							this.datatext = '没有更多数据了'
							return
						} else {
							uni.showLoading({
								title: '数据已加载'
							})
						}
						uni.hideNavigationBarLoading()
					} else {
						this.datatext = '暂无数据'
					}
					setTimeout(function() {
						uni.hideLoading()
					}, 2000)
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none',
						duration: 1500
					})
					this.loading = 'nodata'
					this.datatext = '没有更多数据了'
				}
			})
		}
	}
}
</script>

<style scoped>
	.returnback {
		width: 60px;
		height: 60px;
		position: fixed;
		left: 5%;
		top: 54px;
		opacity: .7;
		float: left;
		z-index: 1;
	}

	.returnback img {
		width: 60px;
		height: 60px;
		float: left;
	}
	.centerclientuserinfo{
		width:100%;
		height: 100%;
		background:#f5f5f5;
	}
	.listbody{
		width: 100%;
		height: auto;
		display: inline-block;
	}
	.centerclientuserinfo .order_item {
		margin-top: 20px;
		margin-bottom: 20px;
		width: 90%;
		margin-left: 5%;
		padding: 40px 20px;
		height: 350px;
		background-color: #fff;
		border-radius: 15px;
		box-sizing: border-box;
		display: inline-block;
	}

	.centerclientuserinfo .order_item_item {
		margin-bottom: 15px;
	}

	.centerclientuserinfo .order_tip {
		display: inline-block;
		width: 150px;
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		color: #999;
		vertical-align: top;
	}

	.centerclientuserinfo .order_content {
		display: inline-block;
		width: 400px;
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		color: #333;
		vertical-align: top;
		word-break: break-all;
		-webkit-line-clamp: 1;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.datatext{
		color: #999999;
		text-align: center;
		margin-top: 30px;
	}
</style>
